<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<title>vue修饰符</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body {
				padding: 40px 0;
			}
			.group {
				position: relative;
				margin: 0 auto 15px;
				padding: 40px 15px 15px;
				width: 1200px;
				border: 1px solid #dfdfdf;
			}
			.group h2 {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				z-index: 1;
				margin-bottom: 10px;
				padding: 0 15px;
				line-height: 40px;
				border-bottom: 1px solid #dfdfdf;
			}
			.group h3 {
				margin-top: 15px;
				margin-bottom: 5px;
			}
		</style>
	</head>
	<body>

		
		<div class="group">
			<h2>表单修饰符</h2>
			<h3>.lazy</h3>
			<p>v-model绑定的时候是已输入即触发双向绑定，添加lazy后，在失去焦点时在触发。</p>
			<h3>.trim</h3>
			<p>过滤首尾的空格</p>
			<h3>.number</h3>
			<p>先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加 .number </p>
			
		</div>
		<div class="group">
			<h2>事件修饰符</h2>
			<h3>.stop</h3>
			<p>阻止事件冒泡</p>
			<h3>.prevent</h3>
			<p>阻止事件的默认行为</p>
			<h3>.self</h3>
			<p>只当事件是从事件绑定的元素本身触发时才触发回调</p>
			<h3>.once</h3>
			<p>绑定了事件以后只能触发一次，第二次就不会触发。</p>
			<h3>.capture</h3>
			<p>事件触发从包含这个元素的顶层开始往下触发。正常是：捕获阶段--目标阶段--冒泡阶段</p>
			<h3>.passive</h3>
			<p>在监听元素滚动事件的时候，会一直触发 onscroll 事件，在移动端，会让我们的网页变卡</p>
			<h3>.native</h3>
			<p>使组件的事件确认能触发</p>
		</div>
		<div class="group">
			<h2>鼠标按钮修饰符</h2>
			<h3>.left</h3>
			<p>绑定到click，就是左键点击</p>
			<h3>.right</h3>
			<p>绑定到click，就是右键点击</p>
			<h3>.middle</h3>
			<p>绑定到click，就是中键点击</p>
		</div>
		<div class="group">
			<h2>键值修饰符</h2>
			<h3>.keyCode</h3>
			<p>如@keyup.ctrl，@keyup.ctrol.67，@keyup.enter等</p>
			<h3>.exact</h3>
			<p>@click.ctrl.exact="shout(4)"，可以按下 ctrl + c，ctrl+v 或者 ctrl+普通键 来触发，但是不能按下 ctrl + shift + 普通键来触发</p>
			<p>@keydown.enter.exact="shout('我被触发了')"，可以同时按下 enter+普通键 来触发，但是不能按下 系统修饰键+enter 来触发</p>
		</div>
		<div class="group">
			<h2>v-bind 修饰符</h2>
			<h3>.sync</h3>
			<p>子组件修改父组件数据。</p>
			<p>父组件 :myMessage.sync="bar"</p>
			<p>子组件 this.$emit('update:myMessage',params);</p>
			<h3>.prop</h3>
			<p>通过自定义属性存储变量，避免暴露数据到attribute</p>
			<h3>.camel</h3>
			<p>使用.camel修饰符，会将绑定的变量照常渲染为驼峰名</p>
		</div>


		
	</body>
</html>